<template>
    <div class="spinner" :class="sizeClass">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  
  const props = defineProps({
    size: {
      type: String,
      default: 'medium',
      validator: (value: string) => ['small', 'medium', 'large'].includes(value)
    }
  })
  
  const sizeClass = computed(() => `spinner-${props.size}`)
  </script>
  
  <style scoped lang="scss">
  .spinner {
    display: inline-block;
    position: relative;
  }
  
  .spinner div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    border-radius: 50%;
    animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border: 4px solid currentColor;
    border-color: currentColor transparent transparent transparent;
  }
  
  .spinner div:nth-child(1) {
    animation-delay: -0.45s;
  }
  
  .spinner div:nth-child(2) {
    animation-delay: -0.3s;
  }
  
  .spinner div:nth-child(3) {
    animation-delay: -0.15s;
  }
  
  @keyframes spinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  .spinner-small {
    width: 20px;
    height: 20px;
    
    div {
      width: 20px;
      height: 20px;
      border-width: 2px;
    }
  }
  
  .spinner-medium {
    width: 40px;
    height: 40px;
    
    div {
      width: 40px;
      height: 40px;
      border-width: 4px;
    }
  }
  
  .spinner-large {
    width: 60px;
    height: 60px;
    
    div {
      width: 60px;
      height: 60px;
      border-width: 6px;
    }
  }
  </style>